<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>computed</title>
  </head>
  <body>
    <div id="app">
      {{ count }} -- {{ doubleCount }} -- {{ plusOne }}
      <button @click="updateCount">修改plusOne计算属性值</button>
    </div>
  </body>

  <script src="../lib/vue.global.js"></script>
  <script>
    const count = ref(10);
    const doubleCount = computed({
      set(val) {
        count.value = val;
      },
      get() {
        return count.value;
      },
    });

    const updateCount = () => {
      plusOne.value = 100;
    };
    return {
      count,
      doubleCount,
      plusOne,
      updateCount,
    };
    Vue.createApp({
      setup,
    }).mount("#app");
  </script>
</html>
